<template>
  <div class="goods_detail">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="(item,index) in goodsInfo.pics"
        :key="index"
        @click="handlePrevewImage(item.pics_mid)"
      >
        <img :src="item.pics_mid" mode="widthFix" />
      </van-swipe-item>
    </van-swipe>
    <!-- 预览 -->
    <!-- <van-image-preview v-model="show" :images="images" closeable startPosition="1">
      <template v-slot:index>第{{ index }}页</template>
    </van-image-preview>-->
    <!-- 价格 -->
    <div class="goods_price">{{goodsInfo.goods_price}}</div>
    <div class="goods_name_wrap">
      <div class="goods_name">{{goodsInfo.goods_name}}</div>
      <div class="goods_collect" @click="onTapCollect">
        <div :class="isCollect?'iconfont icon-shoucang':'iconfont icon-shoucang1'"></div>
        <div class="collect_text">收藏</div>
      </div>
    </div>
    <!-- 详情 -->
    <div class="goods_info">
      <div class="goods_info_title">图文详情</div>
      <div class="goods_info_content">
        <div v-html="goodsInfo.goods_introduce">{{goodsInfo.goods_introduce}}</div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="btm_tool">
      <div class="tool_item">
        <div class="iconfont icon-kefu"></div>
        <div>联系客服</div>
        <button open-type="contact"></button>
      </div>
      <div class="tool_item">
        <div class="iconfont icon-fen_xiang"></div>
        <div>分享</div>
        <button open-type="share"></button>
      </div>

      <div class="tool_item" @click="cartBtn">
        <div class="iconfont icon-cart-Empty"></div>
        <div>购物车</div>
      </div>

      <div class="tool_item btn_cart" @click="handleCartAdd">
        <div>加入购物车</div>
      </div>

      <div class="tool_item btn_buy">
        <div>立即购买</div>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import { mapGetters, mapActions } from 'vuex'
export default {
  data() {
    return {
      goodsInfo: {}
      // isCollect: false
    }
  },
  computed: {
    ...mapGetters(['collectList', 'isCollect'])
  },
  // thisGoodsInfo: {},
  created() {
    const { goods_id } = this.$route.params
    console.log('详情页接收的goods_id', goods_id)
    if (!goods_id) {
      this.getGoodsDetail(57442)
    } else {
      this.getGoodsDetail(goods_id)
    }
  },
  methods: {
    // 请求当前id商品详情
    async getGoodsDetail(goods_id) {
      console.log('detail页面请求', goods_id)
      const { data: res } = await this.$http.get('goods/detail', {
        params: { goods_id: goods_id }
      })
      console.log(res)
      this.goodsInfo = res.message
      this.setIsCollect(this.goodsInfo.goods_id)
      // this.thisGoodsInfo = res.message
      // 设置轮播图数据,价格,名字,详情,商品id
      // this.goodsInfo = {
      //   pics: goodsInfo.pics,
      //   goods_price: goodsInfo.goods_price,
      //   goods_name: goodsInfo.goods_name,
      //   goods_introduce: goodsInfo.goods_introduce.replace(/\.webp/g, '.jpg'),
      //   goods_id: goodsInfo.goods_id
      // }
      // 获取收藏列表
      // const collectList = JSON.parse(localStorage.getItem('collectList')) || []
      // .some数组中有一个满足则返回true
      // this.isCollect = collectList.some(
      //   item => item.goods_id === this.goodsInfo.goods_id
      // )
    },
    // 轮播图预览大图
    handlePrevewImage(pics_mid) {
      // 构建数组,map不改变元数据
      const urls = this.goodsInfo.pics.map(v => v.pics_mid)
      const index = urls.findIndex(item => item === pics_mid)
      console.log(urls, index)
      ImagePreview({
        images: urls,
        startPosition: index,
        closeable: true,
        onClose() {
          console.log('已关闭预览')
        }
      })
    },
    ...mapActions(['addGoods', 'collectGoods', 'setIsCollect']),
    // 加入购物车
    handleCartAdd() {
      console.log('点击了加入购物车')
      this.addGoods(this.goodsInfo)
    },
    // 点击收藏
    async onTapCollect() {
      console.log('点击了收藏')
      this.collectGoods(this.goodsInfo)
    },
    cartBtn() {
      this.$router.push('/cart')
    }
  }
}
</script>

<style lang='less' scope>
.goods_detail {
  .van-swipe {
    width: 100vw;
    height: 40vh;
    text-align: center;

    swiper-item {
      width: 100%;

      img {
        width: 70%;
      }
    }
  }
}

.goods_price {
  padding: 15rpx;
  font-size: 16px;
  color: var(--themeColor);
  font-weight: 600;
}

.goods_name_wrap {
  display: flex;
  border-top: 5rpx solid #dedede;
  border-bottom: 5rpx solid #dedede;
  // 上下
  padding: 10px 0;

  .goods_name {
    flex: 5;
    font-size: 15px;
    color: #000;
    // 左右
    padding: 0 10px;

    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .goods_collect {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 1rpx solid #dedede;

    .icon-shoucang {
      color: orangered;
    }
  }
}

.goods_info {
  .goods_info_title {
    padding: 20rpx;
    font-size: 16px;
    color: var(--themeColor);
    font-weight: 600;
  }

  .goods_info_content {
    color: var(--themeColor);
  }
}

// 底部工具
.btm_tool {
  border: 1rpx solid #ccc;
  position: fixed;
  left: 0;
  bottom: 50px;
  background-color: #fff;
  width: 100%;
  height: 45px;
  display: flex;

  // 每一项
  .tool_item {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    position: relative;

    button {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }

  // 加入购物车
  .btn_cart {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    background-color: #ffa500;
    color: #fff;
  }

  // 立即购买
  .btn_buy {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    background-color: #eb4450;
    color: #fff;
  }
}
</style>
